<template>
  <div class="liveProfile_box">
    <div class="one bs_bdb flex_bt">
      <div class="fs_16 cur_poi">管理</div>
      <div>
        <img
          @click="handleClosePro"
          style="width: 24px; height: 24px"
          src="../assets/close_head.png"
          alt=""
        />
      </div>
    </div>
    <div class="fff flex two fs_16">
      <span style="margin-right: 6px">{{
        store.liveProInfo?.obj1?.nickname
      }}</span>
      <img
        v-if="store.liveProInfo?.obj1?.sex === 1"
        style="width: 18px; height: 18px"
        class="search"
        src="../assets/sex_1.png"
        alt=""
      />
      <img
        v-if="store.liveProInfo?.obj1?.sex === 2"
        style="width: 18px; height: 18px"
        class="search"
        src="../assets/sex_2.png"
        alt=""
      />
    </div>
    <div class="three fs_12 flex">
      <div>ID：{{ store.liveProInfo?.obj1?.id }}</div>
      <div
        style="margin: 0 10px; height: 20px; border: 1px solid #707070"
      ></div>
      <div>IP归属地：{{ store.liveProInfo?.obj2?.userinfo?.deviceip }}</div>
      <div
        style="margin: 0 10px; height: 20px; border: 1px solid #707070"
      ></div>
      <div>粉丝：{{ store.liveProInfo?.obj2?.userinfo?.fanscount }}</div>
    </div>
    <div class="fs_14 flex five fff">
      {{ store.liveProInfo?.obj1?.jianjie }}
    </div>
    <div class="flex four">
      <div class="bg_box flex bs_bdb">
        <img
          style="width: 30px; height: 25px"
          :src="store.mapperLevel[store.liveProInfo?.obj1?.wealthtile]"
          alt=""
        />
        <div class="fff fs_11 pad_lef3">
          <div>{{ store.liveProInfo?.obj1?.wealthtile }}</div>
          <div>{{ store.liveProInfo?.obj1?.wealthlevel }}</div>
        </div>
      </div>
      <div class="bg_box flex bs_bdb">
        <img
          style="width: 30px; height: 25px"
          :src="store.mapperLevel[store.liveProInfo?.obj1?.charmtitle]"
          alt=""
        />
        <div class="fff fs_11 pad_lef3">
          <div>{{ store.liveProInfo?.obj1?.charmtitle }}</div>
          <div>{{ store.liveProInfo?.obj1?.charmlevel }}</div>
        </div>
      </div>
      <div class="bg_box flex bs_bdb">
        <img
          style="width: 24px; height: 24px"
          src="../assets/icon_level.png"
          alt=""
        />
        <div class="fff fs_11 pad_lef3">
          <div>{{ store.liveProInfo?.obj1?.guizu }}</div>
          <div>{{ store.liveProInfo?.obj1?.isvip }}</div>
        </div>
      </div>
    </div>
    <div class="seven flex bs_bdb">
      <img
        :src="store.mapperLevel[store.liveProInfo?.obj1?.wealthtile]"
        alt=""
      />
      <img
        :src="store.mapperLevel[store.liveProInfo?.obj1?.charmtitle]"
        alt=""
      />
    </div>
    <div class="six fs_16 flex fff">
      <div class="six_item flex bs_bdb" @click="handleInfo">@</div>
      <div class="six_item flex bs_bdb" @click="handlePrivateChat">私信</div>
    </div>
    <div class="avatar flex">
      <div
        class="inner_avatar bd_radio flex"
        :style="{
          'box-shadow':
            store.liveProInfo?.obj1?.sex === 2
              ? '0 0 4px 4px rgb(236, 58, 103, 0.8)'
              : ' 0 0 4px 4px rgb(121, 34, 255, 0.4)',
        }"
      >
        <img
          class="bd_radio"
          :src="store.liveProInfo?.obj1?.headimgurl"
          alt=""
        />
      </div>

      <div
        class="follow flex fs_14 bs_bdb fff cur_poi"
        @click="store.handleFollow"
        :style="{
          background:
            store.liveProInfo?.obj2?.isfollow === 0 ? '#ff3166' : '#eee',
          color: store.liveProInfo?.obj2?.isfollow === 0 ? '#fff' : '#aaa',
        }"
      >
        {{ store.liveProInfo?.obj2?.isfollow === 0 ? "关注" : "已关注" }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useCounterStore } from "../store";
import { getFollow, getUnFollow, getuserinfo } from "../http";
const store = useCounterStore();

// const mappeFollow = ref({
//   0: async function (data) {
//     return await getFollow(data);
//   },
//   1: async function (data) {
//     return await getUnFollow(data);
//   },
// });
const doJoinRoom = () => {
  console.log("进入房间");
  if (store.isLine && store.loginSD) {
    store.socketOB.socketSendMessage({
      c: "room",
      m: "joinroom",
      data: {
        roomid: 147300,
      },
    });
  } else {
    setTimeout(() => {
      doJoinRoom();
    }, 1500);
  }
};
const getonlineuser = () => {
  console.log("在线列表数据");
  if (store.isLine && store.joinRoom) {
    store.socketOB.socketSendMessage({
      c: "room",
      m: "getonlineuser",
      data: {},
    });
  } else {
    setTimeout(() => {
      getonlineuser();
    }, 1500);
  }
};
// const handleFollow = async () => {
//   let data = {
//     followuid: store.liveProInfo.obj1.id,
//     jwt: store.loginer.jwt,
//   };
//   let res = await mappeFollow.value[store.liveProInfo?.obj2?.isfollow](data);
//   if (res?.errcode === 0 || res?.data?.errcode === 0) {
//     // 重新刷新数据
//     let reInfo = await getuserinfo({
//       userid: store.liveProInfo?.obj1?.id,
//       jwt: store.loginer.jwt,
//     });
//     store.liveProInfo = {
//       obj2: { ...store.liveProInfo.obj2, isfollow: reInfo?.data?.isfollow },
//       obj1: { ...store.liveProInfo.obj1 },
//     };
//   }
// };
const handleClosePro = () => {
  store.isLivePro = false;
};
const handlePrivateChat = () => {
  store.isLivePro = false;
  store.isPrivateChat = true;
};
const handleInfo = () => {
  store.inpValSend = "@" + store.liveProInfo?.obj1?.nickname;
  store.isLivePro = false;
};
onMounted(() => {});
</script>

<style scoped lang="scss">
.liveProfile_box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  height: 332px;
  background: #282c2f;
  border-radius: 10px 10px 0px 0px;

  .one {
    padding: 10px 12px;
    color: #895cf8;
    img {
      cursor: pointer;
    }
  }
  .two {
    margin-top: 13px;
    margin-bottom: 22px;
  }
  .three {
    color: #cacecf;
    padding: 0 10px;
    // box-sizing: border-box;
  }
  .five {
    margin-top: 15px;
    margin-bottom: 25px;
  }
  .four {
    .bg_box {
      width: 96px;
      height: 42px;
      padding: 3px 7px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .bg_box:not(:last-child) {
      margin-right: 14px;
    }
    .bg_box:first-child {
      background-image: url("../assets/bg_level1.png");
    }
    .bg_box:nth-child(2) {
      background-image: url("../assets/bg_level2.png");
    }
    .bg_box:last-child {
      background-image: url("../assets/bg_level3.png");
    }
  }
  .six {
    .six_item {
      width: 99px;
      height: 34px;
    }
    .six_item:first-child {
      background: linear-gradient(88deg, #8332ff 0%, #5425ff 100%);
      border-radius: 50px 50px 50px 50px;
      margin-right: 46px;
    }
    .six_item:last-child {
      background: linear-gradient(88deg, #a933ff 0%, #7922ff 100%);
      border-radius: 50px 50px 50px 50px;
    }
  }
  .seven {
    padding: 22px 0 22px 0;
    img {
      width: 25px;
      height: 19px;
    }
    img:first-child {
      margin-right: 4px;
    }
  }
  .avatar {
    // position: relative;
    .inner_avatar {
      position: absolute;
      // border: 1px solid red;

      top: -49px;
      //   left: 137px;
      img {
        width: 87px;
        height: 87px;
      }
    }
    .inner_avatar_1 {
      box-shadow: 0 0 4px 4px rgba(236, 58, 103, 0.4);
    }
    .inner_avatar_2 {
      box-shadow: 0 0 4px 4px rgb(121, 34, 255, 0.4);
    }
    .follow {
      position: absolute;
      top: 20px;

      padding: 3px 13px;
      // height: 26px;
      border-radius: 50px 50px 50px 50px;
      //   border: 1px solid #ffffff;
      // background: #ff3166;
    }
    .un_act_foll {
      background: #eee !important;
      color: #aaa !important;
    }
  }
}
</style>
